<template>
  <header class="header header-bg-gradient overflow-hidden">
    <div class="container position-relative">
      <div class="bubble-bg-animation">
        <div class="bubble-item">
          <img
            :src="require('assets/images/bubble-bg/bubble-1.png')"
            alt="bubble"
          />
        </div>
        <div class="bubble-item">
          <img
            :src="require('assets/images/bubble-bg/bubble-1.png')"
            alt="bubble"
          />
        </div>
        <div class="bubble-item">
          <img
            :src="require('assets/images/bubble-bg/bubble-1.png')"
            alt="bubble"
          />
        </div>
        <div class="bubble-item">
          <img
            :src="require('assets/images/bubble-bg/bubble-1.png')"
            alt="bubble"
          />
        </div>
        <div class="bubble-item">
          <img
            :src="require('assets/images/bubble-bg/bubble-2.png')"
            alt="bubble"
          />
        </div>
      </div>
      <div class="header-bg-inner">
        <div class="header-carousel swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="row align-items-center">
                <div class="col-lg-5 pb-30">
                  <div class="header-content text-center text-lg-start">
                    <h1>New Arrival On Spring 2021</h1>
                    <p>
                      This is one of the best and latest collection on to global
                      &amp; international market. Try to buy.
                    </p>
                    <a
                      href="shop-details.html"
                      class="btn main-btn main-btn-radius"
                      >Buy Now</a
                    >
                  </div>
                </div>
                <div class="offset-lg-1 col-lg-6 pb-30">
                  <div class="header-content-image">
                    <img
                      :src="require('assets/images/products/product-12.png')"
                      alt="product"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="row align-items-center">
                <div class="col-lg-5 pb-30">
                  <div class="header-content text-center text-lg-start">
                    <h1>Latest Offer For Spring 2021</h1>
                    <p>
                      This is one of the best and latest collection on to global
                      &amp; international market. Try to buy.
                    </p>
                    <a
                      href="shop-details.html"
                      class="btn main-btn main-btn-radius"
                      >Buy Now</a
                    >
                  </div>
                </div>
                <div class="offset-lg-1 col-lg-6 pb-30">
                  <div class="header-content-image">
                    <img
                      :src="require('assets/images/products/product-12.png')"
                      alt="product"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-navigation">
            <button type="button" class="swiper-button-prev">
              <i class="flaticon-back"></i>
            </button>
            <button type="button" class="swiper-button-next">
              <i class="flaticon-next"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </header>
  <!--  -->
  <div class="new-product-section pb-70">
    <div class="container">
      <div class="row">
        <div class="col-sm-6 col-lg-4 pb-30">
          <div class="product-info-header product-info-header-borderless">
            <h2>Best Seller</h2>
            <div class="carousel-control-arrows">
              <button
                class="bestseller-control-left carousel-control-arrow carousel-control-arrow-radius"
              >
                <i class="flaticon-back"></i>
              </button>
              <button
                class="bestseller-control-right carousel-control-arrow carousel-control-arrow-radius"
              >
                <i class="flaticon-next"></i>
              </button>
            </div>
          </div>
          <div class="best-seller-carousel swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="item">
                  <div class="product-info-card product-info-card-green mb-30">
                    <div class="product-info-card-thumb">
                      <img
                        :src="require('assets/images/products/product-3.png')"
                        alt="product"
                      />
                    </div>
                    <div class="product-info-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'"
                          >New Micro <br />
                          Chairs</a
                        >
                      </h3>
                      <ul class="review-star">
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                      </ul>
                      <a href="#" class="redirect-link">Add To Cart</a>
                    </div>
                  </div>
                  <div class="product-info-card product-info-card-violet">
                    <div class="product-info-card-thumb">
                      <img
                        :src="require('assets/images/products/product-13.png')"
                        alt="product"
                      />
                    </div>
                    <div class="product-info-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'"
                          >New Micro <br />
                          Lamps</a
                        >
                      </h3>
                      <ul class="review-star">
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                      </ul>
                      <a href="#" class="redirect-link">Add To Cart</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="item">
                  <div class="product-info-card product-info-card-green mb-30">
                    <div class="product-info-card-thumb">
                      <img
                        :src="require('assets/images/products/product-13.png')"
                        alt="product"
                      />
                    </div>
                    <div class="product-info-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'"
                          >New Micro <br />
                          Chairs</a
                        >
                      </h3>
                      <ul class="review-star">
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                      </ul>
                      <a href="#" class="redirect-link">Add To Cart</a>
                    </div>
                  </div>
                  <div class="product-info-card product-info-card-violet">
                    <div class="product-info-card-thumb">
                      <img
                        :src="require('assets/images/products/product-13.png')"
                        alt="product"
                      />
                    </div>
                    <div class="product-info-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'"
                          >New Micro <br />
                          Lamps</a
                        >
                      </h3>
                      <ul class="review-star">
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                      </ul>
                      <a href="#" class="redirect-link">Add To Cart</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-navigation disabled">
              <button type="button" class="swiper-button-prev">
                <i class="flaticon-back"></i>
              </button>
              <button type="button" class="swiper-button-next">
                <i class="flaticon-next"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-8 pb-30">
          <div class="product-info-header product-info-header-borderless">
            <h2>Daily Sales</h2>
            <div class="carousel-control-arrows">
              <button
                class="dailysale-control-left carousel-control-arrow carousel-control-arrow-radius"
              >
                <i class="flaticon-back"></i>
              </button>
              <button
                class="dailysale-control-right carousel-control-arrow carousel-control-arrow-radius"
              >
                <i class="flaticon-next"></i>
              </button>
            </div>
          </div>
          <div class="daily-sales-carousel swiper">
            <div class="swiper-wrapper" style="">
              <div class="swiper-slide" style="">
                <div class="item">
                  <div class="product-card-flat">
                    <div class="product-card-thumb">
                      <a :href="'/shop/shop-single'">
                        <img
                          :src="require('assets/images/products/product-6.png')"
                          alt="product"
                        />
                      </a>
                      <ul class="product-card-action">
                        <li>
                          <a href="#">
                            <i class="flaticon-shopping-cart"></i>
                            <span>Add Cart</span>
                          </a>
                        </li>
                        <li>
                          <a href="#" class="quick-view-trigger">
                            <i class="flaticon-visibility"></i>
                            <span>Quick View</span>
                          </a>
                        </li>
                        <li>
                          <a href="#">
                            <i class="flaticon-like"></i>
                            <span>Add Wishlist</span>
                          </a>
                        </li>
                      </ul>
                      <div class="product-status">New</div>
                      <div class="product-counter daily-counter-2">
                        <div class="product-counter-item day2">
                          157<span>days</span>
                        </div>
                        <div class="product-counter-item hour2">
                          23<span>hrs</span>
                        </div>
                        <div class="product-counter-item min2">
                          6<span>mins</span>
                        </div>
                        <div class="product-counter-item sec2">
                          55<span>sec</span>
                        </div>
                      </div>
                    </div>
                    <div class="product-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'">Mini Table</a>
                      </h3>
                      <p class="product-id">R24HER324</p>
                      <div class="product-price">$120.0 <del>$150.0</del></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide" style="">
                <div class="item">
                  <div class="product-card-flat">
                    <div class="product-card-thumb">
                      <a :href="'/shop/shop-single'">
                        <img
                          :src="
                            require('assets/images/products/product-10.png')
                          "
                          alt="product"
                        />
                      </a>
                      <ul class="product-card-action">
                        <li>
                          <a href="#">
                            <i class="flaticon-shopping-cart"></i>
                            <span>Add Cart</span>
                          </a>
                        </li>
                        <li>
                          <a href="#" class="quick-view-trigger">
                            <i class="flaticon-visibility"></i>
                            <span>Quick View</span>
                          </a>
                        </li>
                        <li>
                          <a href="#">
                            <i class="flaticon-like"></i>
                            <span>Add Wishlist</span>
                          </a>
                        </li>
                      </ul>
                      <div class="product-status">New</div>
                      <div class="product-counter daily-counter">
                        <div class="product-counter-item day1">
                          127<span>days</span>
                        </div>
                        <div class="product-counter-item hour1">
                          22<span>hrs</span>
                        </div>
                        <div class="product-counter-item min1">
                          6<span>mins</span>
                        </div>
                        <div class="product-counter-item sec1">
                          55<span>sec</span>
                        </div>
                      </div>
                    </div>
                    <div class="product-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'">Park Sitting Chair</a>
                      </h3>
                      <p class="product-id">R23HY45</p>
                      <div class="product-price">$150.0 <del>$170.0</del></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide" style="">
                <div class="item">
                  <div class="product-card-flat">
                    <div class="product-card-thumb">
                      <a :href="'/shop/shop-single'">
                        <img
                          :src="require('assets/images/products/product-8.png')"
                          alt="product"
                        />
                      </a>
                      <ul class="product-card-action">
                        <li>
                          <a href="#">
                            <i class="flaticon-shopping-cart"></i>
                            <span>Add Cart</span>
                          </a>
                        </li>
                        <li>
                          <a href="#" class="quick-view-trigger">
                            <i class="flaticon-visibility"></i>
                            <span>Quick View</span>
                          </a>
                        </li>
                        <li>
                          <a href="#">
                            <i class="flaticon-like"></i>
                            <span>Add Wishlist</span>
                          </a>
                        </li>
                      </ul>
                      <div class="product-status">New</div>
                      <div class="product-counter daily-counter-2">
                        <div class="product-counter-item day2">
                          157<span>days</span>
                        </div>
                        <div class="product-counter-item hour2">
                          23<span>hrs</span>
                        </div>
                        <div class="product-counter-item min2">
                          6<span>mins</span>
                        </div>
                        <div class="product-counter-item sec2">
                          55<span>sec</span>
                        </div>
                      </div>
                    </div>
                    <div class="product-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'">Simple Sitting Chair</a>
                      </h3>
                      <p class="product-id">TN232EN</p>
                      <div class="product-price">$250.0 <del>$350.0</del></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide" style="">
                <div class="item">
                  <div class="product-card-flat">
                    <div class="product-card-thumb">
                      <a :href="'/shop/shop-single'">
                        <img
                          :src="require('assets/images/products/product-7.png')"
                          alt="product"
                        />
                      </a>
                      <ul class="product-card-action">
                        <li>
                          <a href="#">
                            <i class="flaticon-shopping-cart"></i>
                            <span>Add Cart</span>
                          </a>
                        </li>
                        <li>
                          <a href="#" class="quick-view-trigger">
                            <i class="flaticon-visibility"></i>
                            <span>Quick View</span>
                          </a>
                        </li>
                        <li>
                          <a href="#">
                            <i class="flaticon-like"></i>
                            <span>Add Wishlist</span>
                          </a>
                        </li>
                      </ul>
                      <div class="product-status">New</div>
                      <div class="product-counter daily-counter-1">
                        <div class="product-counter-item day1">
                          127<span>days</span>
                        </div>
                        <div class="product-counter-item hour1">
                          22<span>hrs</span>
                        </div>
                        <div class="product-counter-item min1">
                          6<span>mins</span>
                        </div>
                        <div class="product-counter-item sec1">
                          55<span>sec</span>
                        </div>
                      </div>
                    </div>
                    <div class="product-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'">Plastic Sitting Chair</a>
                      </h3>
                      <p class="product-id">N23HN456</p>
                      <div class="product-price">$20.0 <del>$33.0</del></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide" style="">
                <div class="item">
                  <div class="product-card-flat">
                    <div class="product-card-thumb">
                      <a :href="'/shop/shop-single'">
                        <img
                          :src="require('assets/images/products/product-6.png')"
                          alt="product"
                        />
                      </a>
                      <ul class="product-card-action">
                        <li>
                          <a href="#">
                            <i class="flaticon-shopping-cart"></i>
                            <span>Add Cart</span>
                          </a>
                        </li>
                        <li>
                          <a href="#" class="quick-view-trigger">
                            <i class="flaticon-visibility"></i>
                            <span>Quick View</span>
                          </a>
                        </li>
                        <li>
                          <a href="#">
                            <i class="flaticon-like"></i>
                            <span>Add Wishlist</span>
                          </a>
                        </li>
                      </ul>
                      <div class="product-status">New</div>
                      <div class="product-counter daily-counter-2">
                        <div class="product-counter-item day2">
                          157<span>days</span>
                        </div>
                        <div class="product-counter-item hour2">
                          23<span>hrs</span>
                        </div>
                        <div class="product-counter-item min2">
                          6<span>mins</span>
                        </div>
                        <div class="product-counter-item sec2">
                          55<span>sec</span>
                        </div>
                      </div>
                    </div>
                    <div class="product-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'">Mini Table</a>
                      </h3>
                      <p class="product-id">R24HER324</p>
                      <div class="product-price">$120.0 <del>$150.0</del></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide" style="">
                <div class="item">
                  <div class="product-card-flat">
                    <div class="product-card-thumb">
                      <a :href="'/shop/shop-single'">
                        <img
                          :src="
                            require('assets/images/products/product-10.png')
                          "
                          alt="product"
                        />
                      </a>
                      <ul class="product-card-action">
                        <li>
                          <a href="#">
                            <i class="flaticon-shopping-cart"></i>
                            <span>Add Cart</span>
                          </a>
                        </li>
                        <li>
                          <a href="#" class="quick-view-trigger">
                            <i class="flaticon-visibility"></i>
                            <span>Quick View</span>
                          </a>
                        </li>
                        <li>
                          <a href="#">
                            <i class="flaticon-like"></i>
                            <span>Add Wishlist</span>
                          </a>
                        </li>
                      </ul>
                      <div class="product-status">New</div>
                      <div class="product-counter daily-counter">
                        <div class="product-counter-item day1">
                          127<span>days</span>
                        </div>
                        <div class="product-counter-item hour1">
                          22<span>hrs</span>
                        </div>
                        <div class="product-counter-item min1">
                          6<span>mins</span>
                        </div>
                        <div class="product-counter-item sec1">
                          55<span>sec</span>
                        </div>
                      </div>
                    </div>
                    <div class="product-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'">Park Sitting Chair</a>
                      </h3>
                      <p class="product-id">R23HY45</p>
                      <div class="product-price">$150.0 <del>$170.0</del></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide active" style="">
                <div class="item">
                  <div class="product-card-flat">
                    <div class="product-card-thumb">
                      <a :href="'/shop/shop-single'">
                        <img
                          :src="require('assets/images/products/product-8.png')"
                          alt="product"
                        />
                      </a>
                      <ul class="product-card-action">
                        <li>
                          <a href="#">
                            <i class="flaticon-shopping-cart"></i>
                            <span>Add Cart</span>
                          </a>
                        </li>
                        <li>
                          <a href="#" class="quick-view-trigger">
                            <i class="flaticon-visibility"></i>
                            <span>Quick View</span>
                          </a>
                        </li>
                        <li>
                          <a href="#">
                            <i class="flaticon-like"></i>
                            <span>Add Wishlist</span>
                          </a>
                        </li>
                      </ul>
                      <div class="product-status">New</div>
                      <div class="product-counter daily-counter-2">
                        <div class="product-counter-item day2">
                          157<span>days</span>
                        </div>
                        <div class="product-counter-item hour2">
                          23<span>hrs</span>
                        </div>
                        <div class="product-counter-item min2">
                          6<span>mins</span>
                        </div>
                        <div class="product-counter-item sec2">
                          55<span>sec</span>
                        </div>
                      </div>
                    </div>
                    <div class="product-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'">Simple Sitting Chair</a>
                      </h3>
                      <p class="product-id">TN232EN</p>
                      <div class="product-price">$250.0 <del>$350.0</del></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide active" style="">
                <div class="item">
                  <div class="product-card-flat">
                    <div class="product-card-thumb">
                      <a :href="'/shop/shop-single'">
                        <img
                          :src="require('assets/images/products/product-7.png')"
                          alt="product"
                        />
                      </a>
                      <ul class="product-card-action">
                        <li>
                          <a href="#">
                            <i class="flaticon-shopping-cart"></i>
                            <span>Add Cart</span>
                          </a>
                        </li>
                        <li>
                          <a href="#" class="quick-view-trigger">
                            <i class="flaticon-visibility"></i>
                            <span>Quick View</span>
                          </a>
                        </li>
                        <li>
                          <a href="#">
                            <i class="flaticon-like"></i>
                            <span>Add Wishlist</span>
                          </a>
                        </li>
                      </ul>
                      <div class="product-status">New</div>
                      <div class="product-counter daily-counter-1">
                        <div class="product-counter-item day1">
                          127<span>days</span>
                        </div>
                        <div class="product-counter-item hour1">
                          22<span>hrs</span>
                        </div>
                        <div class="product-counter-item min1">
                          6<span>mins</span>
                        </div>
                        <div class="product-counter-item sec1">
                          55<span>sec</span>
                        </div>
                      </div>
                    </div>
                    <div class="product-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'">Plastic Sitting Chair</a>
                      </h3>
                      <p class="product-id">N23HN456</p>
                      <div class="product-price">$20.0 <del>$33.0</del></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide active" style="">
                <div class="item">
                  <div class="product-card-flat">
                    <div class="product-card-thumb">
                      <a :href="'/shop/shop-single'">
                        <img
                          :src="require('assets/images/products/product-6.png')"
                          alt="product"
                        />
                      </a>
                      <ul class="product-card-action">
                        <li>
                          <a href="#">
                            <i class="flaticon-shopping-cart"></i>
                            <span>Add Cart</span>
                          </a>
                        </li>
                        <li>
                          <a href="#" class="quick-view-trigger">
                            <i class="flaticon-visibility"></i>
                            <span>Quick View</span>
                          </a>
                        </li>
                        <li>
                          <a href="#">
                            <i class="flaticon-like"></i>
                            <span>Add Wishlist</span>
                          </a>
                        </li>
                      </ul>
                      <div class="product-status">New</div>
                      <div class="product-counter daily-counter-2">
                        <div class="product-counter-item day2">
                          157<span>days</span>
                        </div>
                        <div class="product-counter-item hour2">
                          23<span>hrs</span>
                        </div>
                        <div class="product-counter-item min2">
                          6<span>mins</span>
                        </div>
                        <div class="product-counter-item sec2">
                          55<span>sec</span>
                        </div>
                      </div>
                    </div>
                    <div class="product-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'">Mini Table</a>
                      </h3>
                      <p class="product-id">R24HER324</p>
                      <div class="product-price">$120.0 <del>$150.0</del></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide" style="">
                <div class="item">
                  <div class="product-card-flat">
                    <div class="product-card-thumb">
                      <a :href="'/shop/shop-single'">
                        <img
                          :src="
                            require('assets/images/products/product-10.png')
                          "
                          alt="product"
                        />
                      </a>
                      <ul class="product-card-action">
                        <li>
                          <a href="#">
                            <i class="flaticon-shopping-cart"></i>
                            <span>Add Cart</span>
                          </a>
                        </li>
                        <li>
                          <a href="#" class="quick-view-trigger">
                            <i class="flaticon-visibility"></i>
                            <span>Quick View</span>
                          </a>
                        </li>
                        <li>
                          <a href="#">
                            <i class="flaticon-like"></i>
                            <span>Add Wishlist</span>
                          </a>
                        </li>
                      </ul>
                      <div class="product-status">New</div>
                      <div class="product-counter daily-counter">
                        <div class="product-counter-item day1">
                          127<span>days</span>
                        </div>
                        <div class="product-counter-item hour1">
                          22<span>hrs</span>
                        </div>
                        <div class="product-counter-item min1">
                          6<span>mins</span>
                        </div>
                        <div class="product-counter-item sec1">
                          55<span>sec</span>
                        </div>
                      </div>
                    </div>
                    <div class="product-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'">Park Sitting Chair</a>
                      </h3>
                      <p class="product-id">R23HY45</p>
                      <div class="product-price">$150.0 <del>$170.0</del></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-navigation disabled">
              <button type="button" class="swiper-button-prev">
                <i class="flaticon-back"></i>
              </button>
              <button type="button" class="swiper-button-next">
                <i class="flaticon-next"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <section class="testimonial-section p-tb-100 bg-yellow bg-shape">
    <div class="container">
      <div class="section-title">
        <h2>Our Customer Feedback</h2>
      </div>
      <div class="testimonial-carousel-3 swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="client-feedback client-feedback-3">
                <div class="client-feedback-paragraph">
                  <img src="assets/images/quote-secondcolor.png" alt="quote" />
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam.
                  </p>
                </div>
                <div class="client-feedback-autor">
                  <div class="client-feedback-thumb">
                    <img
                      src="assets/images/clients/client-5.jpg"
                      alt="client"
                    />
                  </div>
                  <div class="client-feedback-author-info">
                    <h3 class="client-feedback-name">Ressea Juker</h3>
                    <p class="client-feedback-designation">HR, Shop company.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="client-feedback client-feedback-3">
                <div class="client-feedback-paragraph">
                  <img src="assets/images/quote-secondcolor.png" alt="quote" />
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam.
                  </p>
                </div>
                <div class="client-feedback-autor">
                  <div class="client-feedback-thumb">
                    <img
                      src="assets/images/clients/client-6.jpg"
                      alt="client"
                    />
                  </div>
                  <div class="client-feedback-author-info">
                    <h3 class="client-feedback-name">Josep Fransis</h3>
                    <p class="client-feedback-designation">
                      Marketing specialist
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="client-feedback client-feedback-3">
                <div class="client-feedback-paragraph">
                  <img src="assets/images/quote-secondcolor.png" alt="quote" />
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam.
                  </p>
                </div>
                <div class="client-feedback-autor">
                  <div class="client-feedback-thumb">
                    <img
                      src="assets/images/clients/client-7.jpg"
                      alt="client"
                    />
                  </div>
                  <div class="client-feedback-author-info">
                    <h3 class="client-feedback-name">Julecia Rom</h3>
                    <p class="client-feedback-designation">Specialist, Shop</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="client-feedback client-feedback-3">
                <div class="client-feedback-paragraph">
                  <img src="assets/images/quote-secondcolor.png" alt="quote" />
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam.
                  </p>
                </div>
                <div class="client-feedback-autor">
                  <div class="client-feedback-thumb">
                    <img
                      src="assets/images/clients/client-8.jpg"
                      alt="client"
                    />
                  </div>
                  <div class="client-feedback-author-info">
                    <h3 class="client-feedback-name">Angelina Disuza</h3>
                    <p class="client-feedback-designation">CEO, myfy.com</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="client-feedback client-feedback-3">
                <div class="client-feedback-paragraph">
                  <img src="assets/images/quote-secondcolor.png" alt="quote" />
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam.
                  </p>
                </div>
                <div class="client-feedback-autor">
                  <div class="client-feedback-thumb">
                    <img
                      src="assets/images/clients/client-9.jpg"
                      alt="client"
                    />
                  </div>
                  <div class="client-feedback-author-info">
                    <h3 class="client-feedback-name">Devit M. Kotlin</h3>
                    <p class="client-feedback-designation">HR, sweetshop.com</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="client-feedback client-feedback-3">
                <div class="client-feedback-paragraph">
                  <img src="assets/images/quote-secondcolor.png" alt="quote" />
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam.
                  </p>
                </div>
                <div class="client-feedback-autor">
                  <div class="client-feedback-thumb">
                    <img
                      src="assets/images/clients/client-1.jpg"
                      alt="client"
                    />
                  </div>
                  <div class="client-feedback-author-info">
                    <h3 class="client-feedback-name">Juanita Jensen</h3>
                    <p class="client-feedback-designation">
                      Manager, eCommerce
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="client-feedback client-feedback-3">
                <div class="client-feedback-paragraph">
                  <img src="assets/images/quote-secondcolor.png" alt="quote" />
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam.
                  </p>
                </div>
                <div class="client-feedback-autor">
                  <div class="client-feedback-thumb">
                    <img
                      src="assets/images/clients/client-2.jpg"
                      alt="client"
                    />
                  </div>
                  <div class="client-feedback-author-info">
                    <h3 class="client-feedback-name">Jesse Speer</h3>
                    <p class="client-feedback-designation">
                      CEO, Help company.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="client-feedback client-feedback-3">
                <div class="client-feedback-paragraph">
                  <img src="assets/images/quote-secondcolor.png" alt="quote" />
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam.
                  </p>
                </div>
                <div class="client-feedback-autor">
                  <div class="client-feedback-thumb">
                    <img
                      src="assets/images/clients/client-3.jpg"
                      alt="client"
                    />
                  </div>
                  <div class="client-feedback-author-info">
                    <h3 class="client-feedback-name">Brianna Norwood</h3>
                    <p class="client-feedback-designation">
                      E-Commerce specialist
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="client-feedback client-feedback-3">
                <div class="client-feedback-paragraph">
                  <img src="assets/images/quote-secondcolor.png" alt="quote" />
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam.
                  </p>
                </div>
                <div class="client-feedback-autor">
                  <div class="client-feedback-thumb">
                    <img
                      src="assets/images/clients/client-4.jpg"
                      alt="client"
                    />
                  </div>
                  <div class="client-feedback-author-info">
                    <h3 class="client-feedback-name">Albert Adinson</h3>
                    <p class="client-feedback-designation">CEO, eCommerce</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="client-feedback client-feedback-3">
                <div class="client-feedback-paragraph">
                  <img src="assets/images/quote-secondcolor.png" alt="quote" />
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam.
                  </p>
                </div>
                <div class="client-feedback-autor">
                  <div class="client-feedback-thumb">
                    <img
                      src="assets/images/clients/client-5.jpg"
                      alt="client"
                    />
                  </div>
                  <div class="client-feedback-author-info">
                    <h3 class="client-feedback-name">Ressea Juker</h3>
                    <p class="client-feedback-designation">HR, Shop company.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="client-feedback client-feedback-3">
                <div class="client-feedback-paragraph">
                  <img src="assets/images/quote-secondcolor.png" alt="quote" />
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam.
                  </p>
                </div>
                <div class="client-feedback-autor">
                  <div class="client-feedback-thumb">
                    <img
                      src="assets/images/clients/client-6.jpg"
                      alt="client"
                    />
                  </div>
                  <div class="client-feedback-author-info">
                    <h3 class="client-feedback-name">Josep Fransis</h3>
                    <p class="client-feedback-designation">
                      Marketing specialist
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="client-feedback client-feedback-3">
                <div class="client-feedback-paragraph">
                  <img src="assets/images/quote-secondcolor.png" alt="quote" />
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam.
                  </p>
                </div>
                <div class="client-feedback-autor">
                  <div class="client-feedback-thumb">
                    <img
                      src="assets/images/clients/client-7.jpg"
                      alt="client"
                    />
                  </div>
                  <div class="client-feedback-author-info">
                    <h3 class="client-feedback-name">Julecia Rom</h3>
                    <p class="client-feedback-designation">Specialist, Shop</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="client-feedback client-feedback-3">
                <div class="client-feedback-paragraph">
                  <img src="assets/images/quote-secondcolor.png" alt="quote" />
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam.
                  </p>
                </div>
                <div class="client-feedback-autor">
                  <div class="client-feedback-thumb">
                    <img
                      src="assets/images/clients/client-8.jpg"
                      alt="client"
                    />
                  </div>
                  <div class="client-feedback-author-info">
                    <h3 class="client-feedback-name">Angelina Disuza</h3>
                    <p class="client-feedback-designation">CEO, myfy.com</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="client-feedback client-feedback-3">
                <div class="client-feedback-paragraph">
                  <img src="assets/images/quote-secondcolor.png" alt="quote" />
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam.
                  </p>
                </div>
                <div class="client-feedback-autor">
                  <div class="client-feedback-thumb">
                    <img
                      src="assets/images/clients/client-9.jpg"
                      alt="client"
                    />
                  </div>
                  <div class="client-feedback-author-info">
                    <h3 class="client-feedback-name">Devit M. Kotlin</h3>
                    <p class="client-feedback-designation">HR, sweetshop.com</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="client-feedback client-feedback-3">
                <div class="client-feedback-paragraph">
                  <img src="assets/images/quote-secondcolor.png" alt="quote" />
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam.
                  </p>
                </div>
                <div class="client-feedback-autor">
                  <div class="client-feedback-thumb">
                    <img
                      src="assets/images/clients/client-1.jpg"
                      alt="client"
                    />
                  </div>
                  <div class="client-feedback-author-info">
                    <h3 class="client-feedback-name">Juanita Jensen</h3>
                    <p class="client-feedback-designation">
                      Manager, eCommerce
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="client-feedback client-feedback-3">
                <div class="client-feedback-paragraph">
                  <img src="assets/images/quote-secondcolor.png" alt="quote" />
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam.
                  </p>
                </div>
                <div class="client-feedback-autor">
                  <div class="client-feedback-thumb">
                    <img
                      src="assets/images/clients/client-2.jpg"
                      alt="client"
                    />
                  </div>
                  <div class="client-feedback-author-info">
                    <h3 class="client-feedback-name">Jesse Speer</h3>
                    <p class="client-feedback-designation">
                      CEO, Help company.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="client-feedback client-feedback-3">
                <div class="client-feedback-paragraph">
                  <img src="assets/images/quote-secondcolor.png" alt="quote" />
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam.
                  </p>
                </div>
                <div class="client-feedback-autor">
                  <div class="client-feedback-thumb">
                    <img
                      src="assets/images/clients/client-3.jpg"
                      alt="client"
                    />
                  </div>
                  <div class="client-feedback-author-info">
                    <h3 class="client-feedback-name">Brianna Norwood</h3>
                    <p class="client-feedback-designation">
                      E-Commerce specialist
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="client-feedback client-feedback-3">
                <div class="client-feedback-paragraph">
                  <img src="assets/images/quote-secondcolor.png" alt="quote" />
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam.
                  </p>
                </div>
                <div class="client-feedback-autor">
                  <div class="client-feedback-thumb">
                    <img
                      src="assets/images/clients/client-4.jpg"
                      alt="client"
                    />
                  </div>
                  <div class="client-feedback-author-info">
                    <h3 class="client-feedback-name">Albert Adinson</h3>
                    <p class="client-feedback-designation">CEO, eCommerce</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <div class="client-feedback client-feedback-3">
                <div class="client-feedback-paragraph">
                  <img src="assets/images/quote-secondcolor.png" alt="quote" />
                  <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                    diam.
                  </p>
                </div>
                <div class="client-feedback-autor">
                  <div class="client-feedback-thumb">
                    <img
                      src="assets/images/clients/client-5.jpg"
                      alt="client"
                    />
                  </div>
                  <div class="client-feedback-author-info">
                    <h3 class="client-feedback-name">Ressea Juker</h3>
                    <p class="client-feedback-designation">HR, Shop company.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-navigation disabled">
          <button type="button" class="owl-prev">
            <span aria-label="Previous">‹</span>
          </button>
          <button type="button" class="owl-next">
            <span aria-label="Next">›</span>
          </button>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </section>
</template>

<script setup>
// Import Swiper and modules
import Swiper, { Navigation, Pagination, Scrollbar, Controller } from "swiper";
import "swiper/css";
// import "swiper/css/controller";
// import "swiper/css/navigation";
// import "swiper/css/pagination";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({});
const refData = toRefs(data);

onBeforeMount(() => {});
onMounted(() => {
  Swiper.use([Navigation, Pagination, Controller]); // 使用需要的功能
  var headerCarousel = new Swiper(".header-carousel", {
    slidesPerView: 1,
    loop: true,
    autoplay: {
      delay: 2000,
      disableOnInteraction: false,
    },
    // 如果需要分页器
    pagination: {
      el: ".swiper-pagination",
      type: "bullets",
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });

  var bestSellerCarousel = new Swiper(".best-seller-carousel", {
    slidesPerView: 1,
    loop: true,
    autoplay: {
      delay: 2000,
      disableOnInteraction: false,
    },
    // 如果需要分页器
    pagination: {
      el: ".swiper-pagination",
      type: "bullets",
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },

    // 如果需要滚动条
    scrollbar: {
      el: ".swiper-scrollbar",
    },
  });

  var dailySlesCarousel = new Swiper(".daily-sales-carousel", {
    slidesPerView: 3,
    spaceBetween: 10,
    loop: true,
    autoplay: {
      delay: 2000,
      disableOnInteraction: false,
    },
    // 如果需要分页器
    pagination: {
      el: ".swiper-pagination",
      type: "bullets",
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },

    // 如果需要滚动条
    scrollbar: {
      el: ".swiper-scrollbar",
    },
  });

  var testimonialCarousel3 = new Swiper(".testimonial-carousel-3", {
    slidesPerView: 3,
    spaceBetween: 10,
    loop: true,
    autoplay: {
      delay: 2000,
      disableOnInteraction: false,
    },
    // 如果需要分页器
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
      type: "custom",
      renderCustom: function (swiper, current, total) {
        var customPaginationHtml = "";
        for (var i = 0; i < total; i++) {
          //判断哪个分页器此刻应该被激活
          if (i == current - 1) {
            customPaginationHtml +=
              '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
          } else {
            customPaginationHtml +=
              '<span class="swiper-pagination-customs"></span>';
          }
        }
        return '<div class="swiperPag">' + customPaginationHtml + "</div>";
      },
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
    observeParents: true, //修改swiper的父元素时，自动初始化swiper
  });
});
</script>

<script></script>

<style lang="scss" scoped>
.header-carousel {
  position: static;

  .swiper-navigation button {
    width: 40px;
    height: 40px;
    border: 1px solid #4f5ac2;
    // color: #555555;
    border-radius: 0;
    font-size: 13px;
    transition: all 0.3s linear;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px;

    z-index: 10;
  }

  .swiper-navigation button.swiper-button-prev {
    left: -20px;
  }
  .swiper-navigation button.swiper-button-next {
    right: -20px;
  }
}

.testimonial-carousel-3 {
  :deep(.swiper-pagination) {
    text-align: center;
    margin-top: 10px;

    .swiperPag {
      span {
        width: 10px;
        height: 10px;
        margin: 5px 7px;
        background: #d6d6d6;
        display: inline-block;
        -webkit-backface-visibility: visible;
        transition: opacity 0.2s ease;
        border-radius: 30px;
      }

      .swiper-pagination-customs {
        opacity: 0.62;
        -webkit-transition: all 0.3s linear;
        transition: all 0.3s linear;
        background-color: #4f5ac2;
      }

      .swiper-pagination-customs-active {
        width: 27px;
        opacity: 1;
        background-color: #4f5ac2;
      }
    }
  }
}
</style>
